<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;

        function connect() {
            var socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/messages', function (message) {
                    showMessage(message.body);
                });
            });
        }

        function showMessage(message) {
            var response = document.getElementById('response');
            response.innerHTML += "<p>" + message + "</p>";
        }

        function sendMessage() {
            var message = document.getElementById('message').value;
            stompClient.send("/app/send", {}, message);
        }
    </script>
</head>
<body onload="connect()">
<input type="text" id="message" placeholder="Enter message">
<button onclick="sendMessage()">Send</button>
<div id="response"></div>
</body>
</html>